<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
	<style>
		.first {
			font-size: 1.5rem;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="row first">
			<span class="badge">徽章</span>
			<span class="badge badge-primary">有颜色的徽章</span>
			<span class="badge badge-secondary">有颜色的徽章</span>
			<span class="badge badge-success">有颜色的徽章</span>
			<span class="badge badge-danger">有颜色的徽章</span>
			<span class="badge badge-warning">有颜色的徽章</span>
			<span class="badge badge-info">有颜色的徽章</span>
			<span class="badge badge-light">有颜色的徽章</span>
			<span class="badge badge-dark">有颜色的徽章</span>
		</div>
		<div class="row mt-5">
			<h1><span class="badge badge-primary">有颜色的徽章</span></h1>
			<h2><span class="badge badge-secondary">有颜色的徽章</span></h2>
			<h3><span class="badge badge-success">有颜色的徽章</span></h3>
			<h4><span class="badge badge-danger">有颜色的徽章</span></h4>
			<h5><span class="badge badge-warning">有颜色的徽章</span></h5>
			<h6><span class="badge badge-info">有颜色的徽章</span></h6>
			<h6><span class="badge badge-light">有颜色的徽章</span></h6>
			<h6><span class="badge badge-dark">有颜色的徽章</span></h6>
		</div>
		<div class="row mt-5">
			<button class="btn btn-primary">在按钮里使用徽章<span class="badge badge-light">5</span></button>
		</div>
		<div class="row mt-5 first">
			<span class="badge">徽章</span>
			<span class="badge badge-pill badge-primary">胶囊徽章</span>
			<span class="badge badge-pill badge-secondary">胶囊徽章</span>
			<span class="badge badge-pill badge-success">胶囊徽章</span>
			<span class="badge badge-pill badge-danger">胶囊徽章</span>
			<span class="badge badge-pill badge-warning">胶囊徽章</span>
			<span class="badge badge-pill badge-info">胶囊徽章</span>
			<span class="badge badge-pill badge-light">胶囊徽章</span>
			<span class="badge badge-pill badge-dark">胶囊徽章</span>
		</div>
		<div class="row mt-5 first">
			<a href="#" class="badge badge-pill badge-primary">胶囊徽章</a>
			<a href="#" class="badge badge-pill badge-secondary">胶囊徽章</a>
			<a href="#" class="badge badge-pill badge-success">胶囊徽章</a>
			<a href="#" class="badge badge-pill badge-danger">胶囊徽章</a>
			<a href="#" class="badge badge-pill badge-warning">胶囊徽章</a>
			<a href="#" class="badge badge-pill badge-info">胶囊徽章</a>
			<a href="#" class="badge badge-pill badge-light">胶囊徽章</a>
			<a href="#" class="badge badge-pill badge-dark">胶囊徽章</a>
		</div>
	</div>
</body>

</html>
